<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism effect</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            padding: 4.5rem;
            margin: 0;
            background: #edc0bf;
            /* 渐变背景色 */
            background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
            font-family: 'Inter', sans-serif;
            }
            .card {
            width: 400px;
            height: auto;
            padding: 2rem;
            border-radius: 1rem;
            /* other styles */
            /* 半透明背景颜色 */
            background: rgba(255, 255, 255, .5);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            }
            .card-title {
            margin-top: 0;
            margin-bottom: .5rem;
            font-size: 1.2rem;
            }

            p, a {
            font-size: 1rem;
            }

            a {
            color: #4d4ae8;
            text-decoration: none;
            }
            .shape {
            position: absolute;
            width: 150px;
            top: .5rem;
            left: .5rem;
            }
    </style>
</head>
<body>
    <img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">
    
    <div class="card">
        <h3 class="card-title">Glassmorphism is awesome</h3>
        <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
        <a href="https://ui.glass">Read more</a>
    </div>
</body>
</html>